<template>
  <BasicModal @register="registerModal" width="950px" :title="t(title)" @ok="handleSubmit">
    <template #footer>
      <a-space>
        <a-button size="middle" @click="closeModal">{{ t('取消') }}</a-button>
        <a-button size="middle" type="primary" :loading="confirmLoading" @click="handleSubmit()">
          {{ t('保存') }}
        </a-button>
      </a-space>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  const title = ref<string>('修改部件');
  const confirmLoading = ref<boolean>(false);
  const { t } = useI18n();
  const emits = defineEmits(['success']);

  const [registerModal, { setModalProps, closeModal }] = useModalInner(
    async (params: { formStatus: 'add' | 'update'; record: Recordable }) => {
      const { formStatus } = params;
      if (formStatus == 'add') {
        title.value = '新增在线图表';
      } else {
        title.value = '更新在线图表';
      }

      setModalProps({ loading: false });
    },
  );

  async function handleSubmit() {
    confirmLoading.value = true;
    confirmLoading.value = false;

    closeModal();
    emits('success');
  }
</script>
